<script lang="ts" setup>
import { computed, ref } from 'vue'
import { confirmImport as confirmImportApi, getTempNovelData, parseNovelUrl } from '@/api/import'
import BaseButton from '@/components/ui/BaseButton.vue'
import CustomSelect from '@/components/ui/CustomSelect.vue'
import { safeAreaInsets } from '@/utils/systemInfo'

defineOptions({
  name: 'ImportDetail',
})
definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '导入小说',
  },
})

// 从URL参数获取导入信息
const importUrl = ref('')
const novelData = ref<any>(null)
const platform = ref('')
const tempId = ref('')

// 导入进度状态
const currentStep = ref(1)
const progressTexts = ['', '正在解析链接...', '正在编辑信息...', '导入完成！']

// 平台信息
const platformInfo = ref({
  name: '',
  icon: 'fas fa-question-circle',
  color: '#999',
  url: '',
})

// 小说表单数据
const novelForm = ref({
  title: '',
  author: '',
  cover: 'https://picsum.photos/seed/import-novel/120/180.jpg',
  category: 'modern',
  tags: [] as string[],
  description: '',
  chapterCount: '',
  status: 'ongoing',
  wordCount: '',
  originalUrl: '',
})

// 表单验证错误
const formErrors = ref({
  title: false,
  author: false,
})

// 加载状态
const isLoading = ref(false)

// 模拟小说数据
const mockNovelData = {
  title: '霸道总裁的契约新娘',
  author: '糖糖很甜',
  cover: 'https://picsum.photos/seed/import-novel/120/180.jpg',
  category: 'modern',
  tags: ['现代言情', '霸总', '甜宠', '爽文'],
  description: '一场意外，她成了他的契约新娘。原以为只是一场交易，却不料陷入了他的温柔陷阱...',
  chapters: 156,
  status: 'ongoing',
  wordCount: '45.6万',
  platform: 'fanqie',
  platformName: '番茄小说',
  originalUrl: '',
}

// 小说分类选项
const categoryOptions = ref([
  { value: 'modern', label: '现代言情' },
  { value: 'fantasy', label: '玄幻修仙' },
  { value: 'rebirth', label: '重生逆袭' },
  { value: 'apocalypse', label: '末世囤货' },
  { value: 'historical', label: '穿越古言' },
  { value: 'campus', label: '校园青春' },
  { value: 'workplace', label: '职场励志' },
  { value: 'game', label: '游戏竞技' },
  { value: 'history', label: '历史架空' },
  { value: 'scifi', label: '科幻未来' },
  { value: 'mystery', label: '悬疑推理' },
  { value: 'romance', label: '甜宠文' },
  { value: 'other', label: '其他' },
])

// 小说状态选项
const statusOptions = ref([
  { value: 'ongoing', label: '连载中' },
  { value: 'completed', label: '已完结' },
  { value: 'paused', label: '暂停更新' },
])

// 标签输入
const tagInput = ref('')

// 计算属性：所有标签
const allTags = computed(() => {
  const existingTags = [...novelForm.value.tags]
  if (tagInput.value.trim()) {
    existingTags.push(tagInput.value.trim())
  }
  return existingTags
})

// 更新进度
function updateProgress(step: number) {
  currentStep.value = step
}

// 初始化平台信息
function initPlatformInfo() {
  const platforms = {
    fanqie: {
      name: '番茄小说',
      icon: 'fas fa-apple-alt',
      color: '#ff6b35',
    },
    qidian: {
      name: '起点读书',
      icon: 'fas fa-book',
      color: '#ff4444',
    },
    jjwxc: {
      name: '晋江文学城',
      icon: 'fas fa-feather',
      color: '#f59e0b',
    },
    zongheng: {
      name: '纵横中文网',
      icon: 'fas fa-dragon',
      color: '#8b5cf6',
    },
  }

  const platformData = platforms[platform.value as keyof typeof platforms]
  if (platformData) {
    platformInfo.value = {
      ...platformData,
      url: novelForm.value.originalUrl || importUrl.value,
    }
  }
}

// 加载导入数据
async function loadImportData(url: string) {
  try {
    updateProgress(1)

    // 调用真实解析接口
    const response = await parseNovelUrl({ url })

    // 填充表单数据
    fillFormData(response)

    updateProgress(2)
  }
  catch (error) {
    console.error('解析失败:', error)
    uni.showToast({
      title: '解析链接失败，请检查链接是否正确',
      icon: 'error',
    })
    updateProgress(1)
  }
}

// 模拟解析过程
function simulateParsing() {
  return new Promise((resolve) => {
    setTimeout(resolve, 2000) // 模拟2秒解析时间
  })
}

// 解析小说信息（模拟）
function parseNovelFromUrl(url: string) {
  // 这里应该是实际的解析逻辑
  const data = { ...mockNovelData }
  data.originalUrl = url

  // 根据URL判断平台
  if (url.includes('fanqienovel.com')) {
    data.platform = 'fanqie'
  }
  else if (url.includes('qidian.com')) {
    data.platform = 'qidian'
  }
  else if (url.includes('jjwxc.net')) {
    data.platform = 'jjwxc'
  }
  else if (url.includes('zongheng.com')) {
    data.platform = 'zongheng'
  }

  return data
}

// 填充表单数据
function fillFormData(data: any) {
  novelForm.value.title = data.title || ''
  novelForm.value.author = data.author || ''
  // 直接使用cover URL，不进行额外解码，避免破坏签名参数
  novelForm.value.cover = data.cover || 'https://picsum.photos/seed/import-novel/120/180.jpg'
  novelForm.value.category = data.category || 'modern'
  novelForm.value.tags = data.tags || []
  novelForm.value.description = data.description || ''
  novelForm.value.chapterCount = data.chapters?.toString() || ''
  novelForm.value.status = data.status || 'ongoing'
  novelForm.value.wordCount = data.wordCount || ''
  novelForm.value.originalUrl = data.originalUrl || ''

  // 保存tempId
  if (data.tempId) {
    tempId.value = data.tempId
  }

  // 初始化平台信息
  platform.value = data.platform
  initPlatformInfo()
}

// 标签相关功能
function focusTagInput() {
  // 聚焦到输入框
  const input = document.querySelector('.tag-input-field') as HTMLInputElement
  if (input) {
    input.focus()
  }
}

function handleTagInput(event: any) {
  if (event.key === 'Enter') {
    event.preventDefault()
    const tag = tagInput.value.trim()

    if (tag && !novelForm.value.tags.includes(tag)) {
      addTag(tag)
      tagInput.value = ''
    }
  }
}

function addTag(tag: string) {
  if (!novelForm.value.tags.includes(tag)) {
    novelForm.value.tags.push(tag)
  }
}

function removeTag(index: number) {
  novelForm.value.tags.splice(index, 1)
}

function updateTags(tags: string[]) {
  novelForm.value.tags = [...tags]
}

// 封面上传相关
function selectCoverImage() {
  // 这里应该调用uni.chooseImage
  uni.showToast({
    title: '图片上传功能开发中',
    icon: 'none',
  })
}

function handleCoverSelect(event: any) {
  // 模拟图片上传
  uni.showToast({
    title: '图片上传成功',
    icon: 'success',
  })
}

// 表单验证
function validateForm() {
  formErrors.value.title = false
  formErrors.value.author = false

  let isValid = true

  // 验证书名
  if (!novelForm.value.title.trim()) {
    formErrors.value.title = true
    isValid = false
  }

  // 验证作者
  if (!novelForm.value.author.trim()) {
    formErrors.value.author = true
    isValid = false
  }

  return isValid
}

// 确认导入
async function confirmImport() {
  if (!validateForm()) {
    return
  }

  // 收集表单数据
  const formData = collectFormData()

  // 显示加载状态
  isLoading.value = true
  updateProgress(3)

  try {
    // 调用真实导入接口
    const response = await confirmImportApi(formData)

    // 隐藏加载状态
    isLoading.value = false

    // 显示成功消息
    showSuccess(`小说《${response.title || novelForm.value.title}》导入成功！`)

    // 延迟跳转到书架
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/library/index',
      })
    }, 1500)
  }
  catch (error) {
    isLoading.value = false
    updateProgress(2)
    console.error('导入失败:', error)
    uni.showToast({
      title: '导入失败，请重试',
      icon: 'error',
    })
  }
}

// 收集表单数据
function collectFormData() {
  return {
    tempId: tempId.value,
    title: novelForm.value.title.trim(),
    author: novelForm.value.author.trim(),
    cover: novelForm.value.cover,
    category: novelForm.value.category,
    tags: novelForm.value.tags,
    description: novelForm.value.description.trim(),
    chapterCount: novelForm.value.chapterCount,
    status: novelForm.value.status,
    wordCount: novelForm.value.wordCount.trim(),
  }
}

// 模拟导入过程
function simulateImport() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟90%成功率
      if (Math.random() > 0.1) {
        resolve({})
      }
      else {
        reject(new Error('导入失败'))
      }
    }, 2000)
  })
}

// 显示成功消息
function showSuccess(message: string) {
  uni.showToast({
    title: message,
    icon: 'success',
  })
}

// 返回上一页
function goBack() {
  uni.showModal({
    title: '提示',
    content: '确定要取消导入吗？已编辑的信息将会丢失。',
    success: (res) => {
      if (res.confirm) {
        uni.navigateBack()
      }
    },
  })
}

// 处理分类选择变化
function onCategoryChange(value: string) {
  novelForm.value.category = value
}

// 处理状态选择变化
function onStatusChange(value: string) {
  novelForm.value.status = value
}

// 显示帮助
function showHelp() {
  uni.showModal({
    title: '导入帮助',
    content: '1. 复制小说分享链接\n2. 在搜索页面粘贴链接\n3. 系统自动解析小说信息\n4. 用户可以编辑和补充信息\n5. 确认后导入到个人书架\n\n支持的平台：番茄小说、起点读书、晋江文学城、纵横中文网等',
    showCancel: false,
    confirmText: '知道了',
  })
}

onLoad(async (options: any) => {
  if (options) {
    importUrl.value = decodeURIComponent(options.url || '')
    const dataKey = options.dataKey
    const tempIdParam = options.tempId || ''

    // 优先使用tempId获取数据
    if (tempIdParam) {
      try {
        const tempData = await getTempNovelData(tempIdParam)
        console.log('获取到的临时数据:', tempData)
        fillFormData(tempData)
        updateProgress(2)
        return
      }
      catch (error) {
        console.error('获取临时数据失败:', error)
      }
    }

    // 从localStorage获取数据
    novelData.value = null
    if (dataKey) {
      try {
        novelData.value = uni.getStorageSync(dataKey)
        console.log('从localStorage获取的数据:', novelData.value)
        // 获取后立即清除localStorage
        uni.removeStorageSync(dataKey)
      }
      catch (error) {
        console.error('获取localStorage数据失败:', error)
      }
    }

    // 兼容旧的URL参数方式
    if (!novelData.value && options.data) {
      try {
        novelData.value = JSON.parse(decodeURIComponent(options.data))
        console.log('从URL参数获取的数据:', novelData.value)
      }
      catch (error) {
        console.error('解析URL参数数据失败:', error)
      }
    }

    platform.value = options.platform || ''

    if (novelData.value) {
      fillFormData(novelData.value)
      updateProgress(2)
    }
    else if (importUrl.value) {
      loadImportData(importUrl.value)
    }
    else {
      // 如果没有数据，显示错误
      uni.showToast({
        title: '没有找到导入信息',
        icon: 'error',
      })
      uni.navigateBack()
    }
  }
})
</script>

<template>
  <view class="import-detail-page bg-bg-dark" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
    <!-- 顶部标题栏 -->
    <view class="import-header">
      <view class="header-left">
        <i class="fas fa-arrow-left text-36rpx text-text-primary" @click="goBack" />
        <text class="header-title">导入小说</text>
      </view>
      <view class="header-right">
        <i class="fas fa-info-circle text-32rpx text-text-muted" @click="showHelp" />
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="page-content">
      <!-- 导入进度 -->
      <section class="import-progress">
        <view class="progress-steps">
          <view class="progress-step">
            <view class="step-icon" :class="[{ completed: currentStep >= 1, active: currentStep === 1 }]">
              <i class="fas fa-link" />
            </view>
            <text class="step-text" :class="[{ active: currentStep >= 1 }]">复制链接</text>
          </view>
          <view class="progress-step">
            <view class="step-icon" :class="[{ completed: currentStep >= 2, active: currentStep === 2 }]">
              <i class="fas fa-search" />
            </view>
            <text class="step-text" :class="[{ active: currentStep >= 2 }]">解析信息</text>
          </view>
          <view class="progress-step">
            <view class="step-icon" :class="[{ completed: currentStep >= 3, active: currentStep === 3 }]">
              <i class="fas fa-check" />
            </view>
            <text class="step-text" :class="[{ active: currentStep >= 3 }]">完成导入</text>
          </view>
        </view>
        <view class="progress-text">
          <text>{{ progressTexts[currentStep] || '' }}</text>
        </view>
      </section>

      <!-- 平台信息 -->
      <section v-if="platformInfo.name" class="platform-info">
        <view class="platform-icon" :style="{ backgroundColor: platformInfo.color }">
          <i :class="platformInfo.icon" style="color: white;" />
        </view>
        <view class="platform-details">
          <view class="platform-name">
            <text>{{ platformInfo.name }}</text>
            <view class="auto-detected">
              <i class="fas fa-robot" />
              <text>自动检测</text>
            </view>
          </view>
        </view>
      </section>

      <!-- 小说信息编辑表单 -->
      <section class="novel-edit-form">
        <text class="section-title">小说信息</text>

        <!-- 封面上传 -->
        <view class="form-group">
          <text class="form-label">小说封面</text>
          <view class="cover-upload">
            <view class="cover-preview">
              <image :src="novelForm.cover" class="cover-image" mode="aspectFill" />
            </view>
            <view class="cover-upload-btn">
              <view class="upload-area" @click="selectCoverImage">
                <i class="fas fa-cloud-upload-alt upload-icon" />
                <text class="upload-text">点击上传封面</text>
                <text class="upload-hint">支持 JPG、PNG 格式，建议尺寸 200×300</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 基本信息 -->
        <view class="form-group">
          <text class="form-label">
            小说名称
            <text class="required">*</text>
          </text>
          <input
            v-model="novelForm.title"
            type="text"
            class="form-input" :class="[{ error: formErrors.title }]"
            placeholder="请输入小说名称"
          >
          <text v-if="formErrors.title" class="form-error">请输入小说名称</text>
        </view>

        <view class="form-group">
          <text class="form-label">
            作者名称
            <text class="required">*</text>
          </text>
          <input
            v-model="novelForm.author"
            type="text"
            class="form-input" :class="[{ error: formErrors.author }]"
            placeholder="请输入作者名称"
          >
          <text v-if="formErrors.author" class="form-error">请输入作者名称</text>
        </view>

        <view class="form-group">
          <text class="form-label">小说分类</text>
          <CustomSelect
            v-model="novelForm.category"
            :options="categoryOptions"
            placeholder="请选择小说分类"
            @change="onCategoryChange"
          />
        </view>

        <view class="form-group">
          <text class="form-label">小说标签</text>
          <!-- 已添加的标签 -->
          <view v-if="novelForm.tags.length > 0" class="tags-container">
            <view
              v-for="(tag, index) in novelForm.tags"
              :key="index"
              class="tag-item"
              @click.stop="removeTag(index)"
            >
              <text>{{ tag }}</text>
              <i class="fas fa-times tag-remove" />
            </view>
          </view>
          <!-- 标签输入框 -->
          <view class="tag-input-wrapper">
            <input
              v-model="tagInput"
              type="text"
              class="tag-input-field"
              placeholder="输入标签后按回车添加"
              @keydown="handleTagInput"
              @click="focusTagInput"
            >
          </view>
          <text class="form-hint">输入标签后按回车键添加，点击 × 删除标签</text>
        </view>

        <view class="form-group">
          <text class="form-label">小说简介</text>
          <textarea
            v-model="novelForm.description"
            class="form-textarea"
            placeholder="请输入小说简介（选填）"
          />
          <text class="form-hint">建议100-500字，详细介绍小说内容和特色</text>
        </view>

        <!-- 额外信息 -->
        <view class="form-group">
          <text class="form-label">章节数量</text>
          <input
            v-model="novelForm.chapterCount"
            type="number"
            class="form-input"
            placeholder="请输入章节数量"
          >
        </view>

        <view class="form-group">
          <text class="form-label">小说状态</text>
          <CustomSelect
            v-model="novelForm.status"
            :options="statusOptions"
            placeholder="请选择小说状态"
            @change="onStatusChange"
          />
        </view>

        <view class="form-group">
          <text class="form-label">字数统计</text>
          <input
            v-model="novelForm.wordCount"
            type="text"
            class="form-input"
            placeholder="例如：50万"
          >
        </view>
      </section>

      <!-- 操作按钮 -->
      <section class="action-buttons">
        <BaseButton variant="secondary" class="flex-1" @click="goBack">
          <i class="fas fa-times" />
          <text>取消导入</text>
        </BaseButton>
        <BaseButton variant="primary" class="flex-1" :disabled="isLoading" @click="confirmImport">
          <i class="fas fa-check" />
          <text>确认导入</text>
        </BaseButton>
      </section>
    </view>

    <!-- 加载遮罩 -->
    <view v-if="isLoading" class="loading-overlay">
      <view class="loading-content">
        <view class="loading-spinner" />
        <text class="loading-text">正在导入小说...</text>
        <text class="loading-hint">请稍候，这可能需要几秒钟</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.import-detail-page {
  min-height: 100vh;
}

// 顶部标题栏样式
.import-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--background-medium);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.header-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.page-content {
  padding: 0 var(--spacing-md);
}

// 导入进度样式
.import-progress {
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.progress-steps::before {
  content: '';
  position: absolute;
  top: 40rpx;
  left: 80rpx;
  right: 80rpx;
  height: 4rpx;
  background-color: var(--border-color);
  z-index: 0;
}

.progress-step {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
}

.step-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: var(--background-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-sm);
  font-size: 32rpx;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.step-icon.active {
  background-color: var(--primary-color);
  color: var(--text-primary);
}

.step-icon.completed {
  background-color: #10b981;
  color: white;
}

.step-text {
  font-size: 24rpx;
  color: var(--text-muted);
}

.step-text.active {
  color: var(--text-primary);
  font-weight: 500;
}

.progress-text {
  text-align: center;
}

.progress-text text {
  font-size: 28rpx;
  color: var(--text-muted);
}

// 小说信息编辑表单样式
.novel-edit-form {
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  display: block;
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.form-label .required {
  color: #ef4444;
  margin-left: var(--spacing-xs);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  height: 80rpx;
  padding: 0 var(--spacing-md);
  background-color: var(--background-light);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-size: 28rpx;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  line-height: 1.4;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

// Picker组件样式
.form-picker {
  width: 100%;
  line-height: 80rpx;
  background-color: var(--background-light);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-size: 28rpx;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  line-height: 1.4;
}

.form-picker:active {
  border-color: var(--primary-color);
}

.picker-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80rpx;
  padding: 0 var(--spacing-md);
}

.picker-text {
  flex: 1;
  color: var(--text-primary);
  font-size: 28rpx;
}

.picker-text.placeholder {
  color: var(--text-muted);
}

.picker-arrow {
  color: var(--text-muted);
  font-size: 24rpx;
  transition: transform 0.3s ease;
}

.form-input.error,
.form-textarea.error {
  border-color: #ef4444;
}

.form-textarea {
  height: auto;
  min-height: 160rpx;
  padding: var(--spacing-md);
  resize: vertical;
  line-height: 1.6;
}

.form-hint {
  font-size: 24rpx;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

.form-error {
  font-size: 24rpx;
  color: #ef4444;
  margin-top: var(--spacing-xs);
}

// 封面上传区域样式
.cover-upload {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.cover-preview {
  width: 240rpx;
  height: 360rpx;
  border-radius: var(--spacing-sm);
  background-color: var(--background-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-upload-btn {
  flex: 1;
}

.upload-area {
  border: 4rpx dashed var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: var(--primary-color);
  background-color: rgba(255, 107, 53, 0.05);
}

.upload-icon {
  font-size: 64rpx;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.upload-text {
  font-size: 28rpx;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.upload-hint {
  font-size: 24rpx;
  color: var(--text-muted);
  display: block;
}

// 标签样式
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.tag-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--primary-color);
  color: var(--text-primary);
  border-radius: 40rpx;
  font-size: 24rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tag-item:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-2rpx);
}

.tag-remove {
  cursor: pointer;
  font-size: 28rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.tag-remove:hover {
  opacity: 1;
}

// 标签输入框样式
.tag-input-wrapper {
  background-color: var(--background-light);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  transition: border-color 0.3s ease;
}

.tag-input-wrapper:focus-within {
  border-color: var(--primary-color);
}

.tag-input-field {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 28rpx;
  outline: none;
  line-height: 1.4;
}

.tag-input-field::placeholder {
  color: var(--text-muted);
}

// 平台信息样式
.platform-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--background-light);
  border-radius: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.platform-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.platform-details {
  flex: 1;
}

.platform-name {
  font-size: 28rpx;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.auto-detected {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-radius: 24rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.platform-url {
  font-size: 24rpx;
  color: var(--text-muted);
  word-break: break-all;
}

// 操作按钮样式
.action-buttons {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

// 加载状态样式
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-content {
  text-align: center;
  color: var(--text-primary);
}

.loading-spinner {
  width: 96rpx;
  height: 96rpx;
  border: 6rpx solid var(--border-color);
  border-top: 6rpx solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md);
  display: block;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.loading-hint {
  font-size: 28rpx;
  color: var(--text-muted);
  display: block;
}
</style>
